<template>
  <div>
    <!-- 用户列表 -->
    <el-table :data="tableData" height="750" border style="width: 100%;font-size: 20px;">
      <el-table-column prop="id" label="id" width="180">
      </el-table-column>
      <el-table-column prop="nick" label="昵称" width="180">
      </el-table-column>
      <el-table-column prop="username" label="用户名">
      </el-table-column>
      <el-table-column prop="password" label="密码">
      </el-table-column>
      <el-table-column prop="createTime" label="注册日期">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.$index, scope.row)" type="text" style="font-size: 20px;">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="num">
    </el-pagination>
  </div>
</template>

<script>
import { getUserPage2, deleteUser2 } from '../api/api'
export default {
  data() {
    return {
      tableData: "",
      num: '',
      page: 1
    }
  },
  mounted() {
    getUserPage2(this.page).then((res) => {
      console.log(res);
      this.tableData = res.data.records
      this.num = res.data.pages * 10
    })
  },
  methods: {
    get_page() {
      getUserPage2(this.page).then((res) => {
        console.log(res);
        this.tableData = res.data.records
        this.num = res.data.pages * 10
      })
    },
    deleteRow(index, row) {
      // console.log(row.id);
      if (localStorage.getItem("name") == '超级管理员') {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          deleteUser2(row.id).then((res) => {
            console.log(res);
            this.get_page()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        this.$message({
          type: 'warning',
          message: '您没有权限'
        });
      }
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      getUserPage2(val).then((res) => {
        console.log(res);
        this.tableData = res.data.records
        this.page = val
      })
    }
  },
}
</script>

<style>
body {
  background-color: #fff;
}
</style>